<template>
    <div class="reft-main">
        <p><span>促销：</span> 12月好物放送，App领券购买直降120元</p>
        <div><span>配送：</span> 至 <span @click="addFn" class="lk">
            <span>{{quyu.ss}}</span>
            <span>{{quyu.s}}  </span>
            <span> {{quyu.x}} </span>🖕
            </span> <p >

        </p>
       <p v-show="isshow" class="diquzhi" >
            <a @click="diqu(item.level,item.name)" href="#" v-for="(item,index) in areas" :key="index">{{item.name}}</a>
       </p>
            </div>
        <p><span>服务：</span>无忧退货 快速退款 免费包邮 <a href="">了解详情</a> </p>
       </div>
</template>

<script>
import { area } from '@/library/li.js'
import { computed, reactive, ref } from 'vue'
export default {
  name: 'diqu',
  setup () {
    const quyu = reactive({
      ss: '北京市', s: '北京市', x: '东城区'
    })
    const names = ref(null)
    const level = ref(null)
    const isshow = ref(false)
    const result = ref(area)

    const addFn = () => {
      names.value = ''
      isshow.value = true
    }
    const diqu = (b, a) => {
      level.value = b
      names.value = a
      console.log(b)

      if (level.value === 0) {
        quyu.s = ''
        quyu.x = ''
        quyu.ss = ''
        quyu.ss = names.value
      }

      if (level.value === 1) {
        quyu.s = a
      }
      if (level.value === 2) {
        quyu.x = a
        isshow.value = false
        names.value = null
      }
    }
    let af = null

    const areas = computed(() => {
      if (!names.value) return area

      // 计算县级列表
      if (level.value === 0) {
        // 点击了省，计算它的市级数据
        af = result.value.find(item => item.name === names.value).areaList
        return result.value.find(item => item.name === names.value).areaList
      }

      if (level.value === 1) {
        return af.find(item => item.name === names.value).areaList
      }

      // 省级列表
      // 计算市级列表

      return result
    })
    const areass = ref(area)
    const sss = ref('ssss')
    const s = ref(null)
    const x = ref(null)
    return {
      areass,
      sss,
      s,
      x,
      names,
      diqu,
      areas,
      addFn,
      isshow,
      quyu
    }
  }

}
</script>

<style lang="less">

 .reft-main{
     .lk {
    width: 100px;
    height: 20px;
    border: 1px solid #9b9b9b;
    span{
        margin: 0px 15px;
    }
}
      width: 500px;
      background-color: #f5f5f5;
      padding: 10px 0;
      margin: 20px 0;
      position: relative;

      p{
          color: #666666;
        margin-bottom: 20px;
        a{
          color: #5ab79c;
        }
      }
      span{
color: #9b9b9b;
        margin: 0 20px;
      }
        .diquzhi{
        margin-bottom: 0;
background-color: #9b9b9b;
        position: absolute;
        left: 0px;
        top: 80px;
        padding: 10px;
        line-height: 30px;
       a{
           color: aliceblue;
            margin-left: 10px;
       }
    }
    }

</style>
